<template>
  <el-col :span="8" class="image-col">
    <div class="image-wrapper">
      <img :src="player.imageUrl" alt="" class="image" />
      <div class="text-overlay">
        <p>{{ player.name }}</p>
        <p>{{ player.country }}</p>
      </div>
    </div>
  </el-col>
</template>

<script setup>
defineProps({
  player: {
    type: Object,
    required: true,
    default: () => ({
      name: '',
      country: '',
      imageUrl: ''
    })
  }
})
</script>   
<style scoped>

.player-container,
.news-container {
  width: 80%;
  margin: 0 auto;
}
/* 图片行整体样式 */
.image-row {
  margin: 20px 0;
}

/* 单个图片列样式 */
.image-col {
  position: relative;
}
/* 图片样式 */
.image {
  width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.product-image {
  width: 100%;
}
/* 覆盖在图片上的文字样式 */
.text-overlay {
  position: absolute;
  top: 90%;
  left: 10%;
  transform: translate(-10%, -90%);
  color: #fff;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
  pointer-events: none; /* 禁止鼠标事件 */
  z-index: 2;
}
</style> 